<template>
    <div class="orderpurchase">
        <Head msg="采购订单"></Head>
        <div class="swiper-tab dis-flex box-align-center flex-y-center">
            <div v-for="(item,index) in tabList" :key="index" class="swiper-tab-item"
                 :class="dataType == item.value ? 'on' : ''"
                 @click="swichNav(item.value)">
                {{ item.text }}
            </div>
        </div>
        <cube-scroll
                ref="scroll"
                class="scroll-body"
                :data="list"
                :options="options"
                @pulling-up="enquiry"
        >
        <div class="order-list" v-for="(item,index) in list" :key="index" @click="toDetail(item.id)">
            <div class="order-head">
                <div>编号：{{item.order}}</div>
                <div class="order-status" :class="item.finish!=1?'red':''">{{item.finish==1?'已完成':'进行中'}}</div>
            </div>

            <div class="order-content">
                <img class="order-goods-img" :src="item.img">
                <div class="order-right">
                    <div class="goods-name">{{item.name}}</div>

                    <div class="goods-group">
                        <div>所属供应商</div>
                        <div class="goods-supplier">{{item.supplier}}</div>
                    </div>

                    <div class="goods-group">
                        <div>采购数量</div>
                        <div class="goods-number">x {{item.number}}</div>
                    </div>

                    <div class="goods-group">
                        <div>采购价格</div>
                        <div class="goods-price">¥{{item.money}}</div>
                    </div>

<!--                    <div class="goods-btn-group">-->
<!--                        <div class="bargain-btn">还价</div>-->
<!--                        <div class="reenquiry-btn">再次询价</div>-->
<!--                    </div>-->
                </div>
            </div>
        </div>
        <!-- 没有记录 -->
        <div class="yoshop-notcont" v-if="!list.length && !isLoading">
            <!--                        <div class="iconfont icon-wushuju"></div>-->
            <div class="cont">亲，暂无订单哦</div>
        </div>
        </cube-scroll>

    </div>
</template>
<script lang="ts">
    // @ is an alias to /src
    import {Component} from "vue-property-decorator";
    import Sence from "../sence/Sence";
    import Head from '@/components/Head.vue';

    @Component({
        components: {
            Head
        },
    })

    export default class Orderpurchase extends Sence {
        public page: number = 1; // 当前页数
        public tabList: any = [{value: 1, text: "已完成"}, {value: 2, text: "进行中"}];
        public dataType: any = 1;// 选中顶部菜单值
        public isLoading: boolean = true; // 加载锁
        public list: any = []; // 列表数据
        public options: object = {
            pullUpLoad: true
        };//上拉加载

        /**
         * 初始化
         */
        public mounted(): void {
            this.enquiry();
        }

        /**
         * 获取产品采购订单列表
         */
        public enquiry(): void {
            this.post('index.php/api/Purchase/list', {
                pages: this.page,
                limit: this.pageSize,
                finish: this.dataType
            }).then((res: any) => {
                this.list = [...this.list,...res.data];
                this.page+=1;
                if (res.data.length < this.pageSize) {
                    this.options = {
                        pullUpLoad: false
                    };//上拉加载
                }
                this.isLoading = false;
            })
        }

        /**
         * 切换选项卡
         */
        public swichNav(value: any): void {
            // if (this.dataType == value) {
            //     return;
            // }
            this.dataType = value;
            this.page = 1;
            this.list = [];
            this.isLoading = true;
            this.enquiry();
        }

        /**
         * 前往详情
         */
        public toDetail(id:any):void{
            this.$router.push(`detailpurchase?id=${id}`)
        }
    }


</script>

<style scoped lang="stylus" >
    .orderpurchase
        padding-bottom 3vw

    .scroll-body
        height calc(100vh - 95px)

    >>>.cube-scroll-list-wrapper
        overflow visible

    .order-list
        margin 3vw 3vw 0 3vw
        display flex
        flex-direction column
        padding 3vw
        background white
        box-shadow 0 0 10px #ccc
        border-radius 5px

    .order-head
        display flex
        flex-direction row
        justify-content space-between
        align-content center
        border-bottom 1px solid #f2f2f2
        padding-bottom 3vw


    .order-status
        color #339933

    .order-content
        margin-top 3vw
        justify-content space-between
        display flex
        flex-direction row

    .order-goods-img
        width 88px
        height 66px

    .order-right
        width calc(94vw - 6vw - 88px - 10px)
        display flex
        flex-direction column

    .goods-name
        font-size 16px
        font-weight bold

    .goods-group
        display flex
        flex-direction row
        justify-content space-between
        margin-top 10px

    .goods-supplier
        color #808080

    .goods-number
        color #808080

    .goods-price
        color #fa4254

    .goods-btn-group
        margin-top 10px
        display flex
        flex-direction row
        justify-content flex-end

        div
            padding 7px 15px
            font-size 12px
            text-align center
            color white
            border-radius 5px

    .bargain-btn
        background #fa4254
        margin-right 3vw

    .reenquiry-btn
        background orange


</style>
